<template>
  <view class="content">
    <view style="background-color: #165dff; width: 100%; height: 300rpx">
      <image src="../static/images/title-icon.png" mode="widthFix" class="title-bar">
      </image>
      <view class="search-bar-container">
        <view style="flex: 6">
          <uni-search-bar bgColor="rgba(255, 255, 255, 0.3)" textColor="#fff" radius="100" placeholder="搜索关键词"
            clearButton="auto" cancelButton="none" @confirm="search">
            <uni-icons slot="searchIcon" color="#fff" size="18" type="search" />
          </uni-search-bar>
        </view>
        <view style="flex: 1;margin-left: 20rpx;">
          <uni-icons type="scan" size="30" color="#fff"></uni-icons>
        </view>
      </view>
    </view>
    <view style="width: 100%;height: 200rpx;margin-top: 20rpx;">
      <!-- <u-tabs :list="list1" @click="click"> </u-tabs> -->
      <u-tabs :list="list1" @click="click" lineWidth="30" lineColor="#f56c6c" :activeStyle="{
        color: '#303133',
        fontWeight: 'bold',
        transform: 'scale(1.05)'
      }" :inactiveStyle="{
                color: '#606266',
                transform: 'scale(1)'
              }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
      </u-tabs>
      <view :style="{ height: availableHeight + 'rpx', overflow: 'auto' }" v-if="menuName == '资讯中心'">
        <InformationCenter></InformationCenter>
      </view>
      <view :style="{ height: availableHeight + 'rpx', overflow: 'auto' }" v-if="menuName == '安全三个一'">
        <SafeThreeOne></SafeThreeOne>
      </view>
      <view :style="{ height: availableHeight + 'rpx', overflow: 'auto' }" v-if="menuName == '培训任务'">
        <TrainingTask></TrainingTask>
      </view>
      <view :style="{ height: availableHeight + 'rpx', overflow: 'auto' }" v-if="menuName == '班前会'">
        <ClassMeeting></ClassMeeting>
      </view>
      <view>
        <u-notice-bar :text="text1"></u-notice-bar>
      </view>
    </view>
  </view>
</template>

<script>
import InformationCenter from './index/informationCenter';
import SafeThreeOne from './index/safeThreeOne';
import TrainingTask from './index/trainingTask';
import ClassMeeting from './index/classMeeting';
export default {
  components: {
    InformationCenter,
    SafeThreeOne,
    TrainingTask,
    ClassMeeting
  },
  data() {
    return {
      searchValue: "123123",
      text1: '公司内部交流平台，未经许可不得外传',

      list1: [{
        name: '资讯中心',
      }, {
        name: '安全三个一',
      }, {
        name: '培训任务'
      }, {
        name: '班前会'
      }],
      menuName: '资讯中心',
      contentHeight: 500
    };
  },
  // ... existing code ...
  computed: {
    availableHeight() {
      uni.getSystemInfo({
        success: (res) => {
          this.availableHeight = res.windowHeight;
        },
      });
    }
  },
  methods: {
    search(res) {
      uni.showToast({
        title: "搜索：" + res.value,
        icon: "none",
      });
    },
    click(item) {
      console.log('item', item);
      this.menuName = item.name;
      console.log('item', this.menuName);
    },

  },
};
</script>

<style lang="scss">
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
}

.title-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 400rpx;
  height: 400rpx;
}

.search-bar-container {
  margin-top: 200rpx;
  display: flex;
  align-items: center;
  opacity: 0.6;
}

/deep/ .uni-searchbar__box .uni-searchbar__text-placeholder {
  color: #fff;
  opacity: 1;
}

/deep/ .uni-searchbar .uni-searchbar__box .uni-searchbar__text-input {
  color: #fff;
  opacity: 1;
}
</style>